<!--课程类别管理-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
        <div class="search-button color-yellow" @click="addType()">
            <img src="../../../assets/assessment/icon-addRed.png" alt="" />
            <span>新增课程分类名称</span>
        </div>
        <div class="search-container-item right20">
            <div class="item-name">课程分类名称：</div>
            <el-input size="mini" v-model="dataForm.subCategoryName" style="width: 122px;"></el-input>
        </div>
        <div class="search-button color-primary width70" @click="initList">
            <img src="../../../assets/assessment/icon-search.png" alt="" />
            <span>查询</span>
        </div>
    </div>
    <div class="table-container table-css">
        <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
            <el-table-column prop="subCategoryName" label="课程分类名称" align="center" min-width="200"></el-table-column>
            <el-table-column prop="count" label="课题分类阶段设置" align="center" min-width="400">
            <div slot-scope="scope" style="padding-left:30px">
                <span class="right30" v-for="i in scope.row.stagesRes" :key="i.scsId">{{i.scsName}}</span>
            </div>
            </el-table-column>
            <el-table-column label="操作" align="center" min-width="200">
                <div class="btn-css" slot-scope="scope">
                    <span class="small-btn color-green" @click="addType(scope.row)">
                        <img src="../../../assets/assessment/icon-plan-record-detail.png"> 修改
                    </span>
                    <span class="small-btn color-primary btn2" @click="btnJD(scope.row)">
                        <img src="../../../assets/assessment/icon-set.png"> 课题阶段管理
                    </span>
                    <span class="small-btn btn3" @click="deleteInfo(scope.row.subCategoryId)">
                        <img src="../../../assets/assessment/icon-delete.png"> 删除
                    </span>
                </div>
            </el-table-column>
        </el-table>
        <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(dataForm.pageNo-1)*50 == 0?1:(dataForm.pageNo-1)*50}}-{{total>50?dataForm.pageNo*50:total}}条</h1>
        <div class="pagination-block">
            <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
            :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
    </div>
    <el-dialog :title="addForm.id?'编辑课程分类名称':'新增课程分类名称'" :visible.sync="dialogAdd" :close-on-click-modal="false" width="50%">
      <div class="my-form-container" style="height:62px;width:80%">
        <el-form :model="addForm" ref="addForm"  :rules="rules" class="demo-ruleForm">
          <el-row class="my-form-item" style="border-bottom: none;">
            <el-col :span="24">
              <div class="my-form-item-label" >课程分类名称</div>
              <el-form-item  prop="subCategoryName">
                <div class="my-form-item-value">
                  <el-input v-model="addForm.subCategoryName"></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="button-group" slot="footer" style="margin-top:0">
          <div class="" @click="saveType">保存</div>
          <div class="" @click="dialogAdd=false">取消</div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import {topicList,deleteTopic,addType } from "@/api/teachingTopic";

export default {
  data() {
    return {
      dialogAdd:false,
      total:1,
      dataForm:{
        subCategoryName:'',//课题分类名称
        pageNo:1,
        pageSize:50
      },
      addForm:{subCategoryId:'',subCategoryName:''},
      tableData: [],
      rules: {
        subCategoryName: [
          { required: true, message: '课题分类名称不能为空', trigger: 'blur' }
        ]
      },
    };
  },
  components:{
  },
  mounted(){
    this.initList();
  },
  methods: {
    //初始化表格
    async initList(){
      let res = await topicList(this.dataForm);
      if(res.code == 200){
        this.tableData = res.data.records;
        this.total = res.data.total;
      }
    },
    deleteInfo(id){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        let res = await deleteTopic({subCategoryId:id})
        if(res.code == 200){
          this.$message.success('删除成功！');
          this.initList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        }); 
      });
      
    },
    addType(row){
      this.dialogAdd = true;
      this.$nextTick(()=>{
        this.$refs['addForm'].resetFields();
      })
      if(row){
        this.addForm.subCategoryId = row.subCategoryId;
        this.addForm.subCategoryName = row.subCategoryName
      }else{
        Object.assign(this.addForm,this.$options.data().addForm)
      }
    },
    async saveType(){
      this.$refs['addForm'].validate(async(valid) => {
        if (valid) {
          let res = await addType(this.addForm);
          if(res.code == 200){
            this.dialogAdd = false;
            this.initList()
          }
        } 
      });
    },
    btnJD(row){
      this.$router.push({
        path:'/teachingTopics/topicType/stageList',
        query:{
          row:row
        }
      })
    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.right20{margin-right: 20px;}
.width70{width: 70px;}
.search-container {
  justify-content: flex-start !important;
}
.color-green{
  background: #F1FFF8;
  border: 1px solid #02C86C;
  color: #02C86C;
  >img{width: 17px!important;height:17px!important}
}
.color-yellow{
    width: 164px;
    background: #FEF1E8;
    border: 1px solid #F86900;
    color: #F86900;
    margin-right: 35px;
}
.btn-css{
  display: flex;
  .btn2{width: 140px;}
  .btn3{
        background: #FFEFEF;
        border: 1px solid #FF3819;
        color:#FF3819;
    }
}
.right30{margin-right: 30px;display: inline-block;&:last-child{margin-right: 0;}}
 /deep/.button-group{
    padding-bottom: 20px;
    margin-top: 50px;
  }
    /deep/.demo-ruleForm{
        .el-form-item__error {
            top: 75%;
            left: 40px;
        }
    }
</style>
